<template>
  <basic-card
    :title="$t('menu.monitor_reallytime')"
    :iconClass="'iconfont icon-shexiangtou'">
    <div class="really-time-container" style="width: 100%; height: calc(100% - 80px);">
      <div style="width: 100%; height: 100%;">
        <el-row style="width: 100%; height: 100%;"  :gutter="20">
          <el-col :span="19" style="height: 100%;">
            <el-tabs v-model="tabModel" style="margin-top: 10px;">
              <el-tab-pane label="单屏" name="1_1"></el-tab-pane>
              <el-tab-pane label="四分屏" name="2_2"></el-tab-pane>
              <el-tab-pane label="九分屏" name="3_3"></el-tab-pane>
              <el-tab-pane label="十六分屏" name="4_4"></el-tab-pane>
              <el-tab-pane label="二五分屏" name="5_5"></el-tab-pane>
              <el-tab-pane label="三六分屏" name="6_6"></el-tab-pane>
              <el-tab-pane label="四九分屏" name="7_7"></el-tab-pane>
            </el-tabs>
            <video v-if="video.key !== 0" v-for="video in videoList" ref="videos" :style="videoStyle" controls autoplay></video>
          </el-col>
          <el-col :span="5" style="height: 100%;">
            <el-card>
              <div slot="header" class="clearfix">
                <span>组织</span>
              </div>
              <div class="tree-container scroll" style="height: 720px;overflow-y: scroll;">
                <el-tree :data="groupTree" ref="tree" @node-click="clickGroup">
                  <span class="custom-tree-node" slot-scope="{ node, data }">
                    <span v-if="node.data.type === 'area'">{{ node.label }}</span>
                    <span v-if="node.data.type === 'allDevices'" style="color: #820650">{{ node.label }}</span>
                    <span v-if="node.data.type === 'allPlay'" style="color: #c414f0" @click="wantToWatchAll(node.data.deviceCode, node.data.channel)">||| {{ node.label }} |||</span>
                    <span v-if="node.data.type === 'play'"  style="color: #1482f0" @click="wantToWatchOne(node.data.deviceCode, node.data.channel)">{{ node.label }}</span>
                  </span>
                </el-tree>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </div>
  </basic-card>
</template>

<script>
import Vue from 'vue'
import BasicCard from "@/components/Basic/Card/BasicCard.vue"
import Hls from "hls.js"

export default Vue.extend({
  components: {BasicCard},
  data: () => ({
    tabModel: "1_1",
    numX: 1,
    numY: 1,

    targetVideoNum: -1,

    groupTree: [],

    ip: "",
    port: 0,
  }),
  computed: {
    videoList() {
      return Array.from(new Array(this.numX * this.numY).keys()).map(num => ({
        key: `video${num}`,
        num: num,
      }))
    },
    videoStyle() {
      return {
        width: `calc(100% / ${this.numX} - 8px)`,
        height: `calc(100% / ${this.numY} - 2px)`,
        backgroundColor: "#afafb2",
        marginLeft: '4px',
        marginRight: '4px',
        marginTop: '1px',
        marginBottom: '1px',
      }
    }
  },
  methods: {
    wantToWatchAll(deviceCode, channel) {
      for (let video of this.videoList) {
        if (video.num < channel) {
          this.hlsPlay(video.num, deviceCode, video.num)
        }
      }
      this.targetVideoNum = -1
    },
    wantToWatchOne(deviceCode, channel) {
      if (this.targetVideoNum > this.videoList.length - 1) {
        this.targetVideoNum = 0
      } else {
        this.targetVideoNum += 1
      }
      this.hlsPlay(this.targetVideoNum, deviceCode, channel)
    },
    pushGroupTreeDevice(devices) {
      return devices.map(device1 => ({
        label: device1.name,
        type: "allDevices",
        channel: device1.channel,
        deviceCode: device1.deviceCode,
        children: [
          { label: "一键播放", type: "allPlay", channel: device1.channel, deviceCode: device1.deviceCode, },
          ...Array.from(new Array(device1.channel).keys()).map(num => ({
            label: `通道-${num + 1}`,
            type: "play",
            channel: num,
            deviceCode: device1.deviceCode,
          }))
        ]
      }))
    },
    reqGroupTree() {
      this.$mainApi.areaApi.getAll()
        .then(resp => {
          let {data} = resp
          this.groupTree = data.map(item => ({
            label: item.name,
            type: "area",
            children: [
              ...this.pushGroupTreeDevice(item.deviceCameras),
              ...item.subList.map(area1 => ({
                label: area1.name,
                type: "area",
                children: [
                  ...this.pushGroupTreeDevice(area1.deviceCameras),
                  ...area1.subList.map(area2 => ({
                    label: area2.name,
                    type: "area",
                    children: [
                      ...this.pushGroupTreeDevice(area2.deviceCameras),
                      ...area2.subList.map(area3 => ({
                        label: area3.name,
                        type: "area",
                        children: [
                          ...this.pushGroupTreeDevice(area3.deviceCameras),
                          ...area3.subList.map(area4 => ({
                            label: area4.name,
                            type: "area",
                          }))
                        ]
                      }))
                    ]
                  }))
                ]
              }))
            ]
          }))
        })
    },
    clickGroup() {},
    getSetting() {
      return new Promise(resolve => {
        this.$mainApi.serviceConfigApi
          .getById(this.$config.SERVICE_CONFIG_ID.monitor)
          .then((res) => {
            if (!res.data) return;
            this.ip = res.data.ipAddress;
            this.port = res.data.sendPort;
            return resolve()
          });
      })
    },
    hlsPlay(videoNum, deviceCode, channel) {
      this.video = this.$refs.videos[videoNum]
      console.log("当前播放器为", videoNum);
      const videoSrc = `http://${ this.ip }:${ this.port }/live/cameraid/${ deviceCode }$${ channel }/substream/1.m3u8`;
      // const videoSrc = 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8';
      if (Hls.isSupported()) {
        this.hls = new Hls();
        this.hls.loadSource(videoSrc);
        this.hls.attachMedia(this.video);
        this.hls.on(Hls.Events.MANIFEST_PARSED, () => {
          this.video.play();
          console.log('加载成功:'+videoSrc)
        });

        this.hls.on(Hls.Events.ERROR, (event, data) => {
          console.log(event, data);
          // 监听出错事件
          console.log('加载失败');
        });
      }
    },
  },
  created() {
    this.getSetting()
  },
  mounted() {
    this.reqGroupTree()
    this.$nextTick(() => {

    })
  },
  watch: {
    tabModel: {
      handler: function (val) {
        switch (val) {
          case "1_1":
            this.numX = 1
            this.numY = 1
            break
          case "2_2":
            this.numX = 2
            this.numY = 2
            break
          case "3_3":
            this.numX = 3
            this.numY = 3
            break
          case "4_4":
            this.numX = 4
            this.numY = 4
            break
          case "5_5":
            this.numX = 5
            this.numY = 5
            break
          case "6_6":
            this.numX = 6
            this.numY = 6
            break
          case "7_7":
            this.numX = 7
            this.numY = 7
            break
        }
      },
      immediate: true,
    }
  }
})
</script>

<style scoped>
.scroll::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-image: -webkit-gradient(linear,left bottom,left top,color-stop(.44,#7a99d9),color-stop(.72,#497dbd),color-stop(.86,#1c3a94));
}
#scroll::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
  background-color: #f5f5f5;
  border-radius: 10px;
}
</style>

